<template>
  <div class="rule">
    <el-row>
      <el-col :span="3">分销比例默认设置：</el-col>
      <el-col :span="12">
        <el-table
          :data="state.showPricentData.percent"
          style="width: 80%"
          border
          tooltip-effect="dark"
          v-loading="tableLoading"
        >
          <el-table-column
            prop="jibie"
            label="推广员级别"
            align="center"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="percent"
            label="默认推广佣金比例"
            align="center"
            show-overflow-tooltip
          >
            <template #default="scope">
              <!-- 这里这样是为了方便以后如果数据多了 scope.$index获得下标-->
              <span v-if="!tableIsEdit">{{ scope.row.percent }}%</span>
              <div v-else>
                <div>请输入0-80的数字</div>
                <el-input-number v-model="scope.row.percent" :min="0" :max="80"></el-input-number>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="indirectPercent"
            label="间接佣金比例"
            align="center"
            show-overflow-tooltip
          >
            <template #default="scope">
              <!-- 这里这样是为了方便以后如果数据多了 scope.$index获得下标-->
              <span v-if="!tableIsEdit">{{ scope.row.indirectPercent }}%</span>
              <div v-else>
                <div>请输入0-80的数字</div>
                <el-input-number v-model="scope.row.indirectPercent" :min="0" :max="80"></el-input-number>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <!-- <template #default="scope"> -->
            <div>
              <el-button type="text" @click="percentEdit" v-permission="['dis:rule:edit']">编辑</el-button>
            </div>
            <!-- </template> -->
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="3">推广文案默认设置：</el-col>
      <el-col :span="12">
        <div
          class="document-item"
          v-for="(item, index) in state.showPromptData.prompts"
          :key="index"
        >
          <span v-if="clickIndex !== index" class="document">{{ item.prompt }}</span>
          <input
            class="document-input"
            v-model="item.prompt"
            v-else
            type="text"
          />
          <span class="document-button" @click="promptEdit(index)" v-permission="['dis:rule:edit']">编辑</span>
        </div>
      </el-col>
    </el-row>
  </div>
  <span class="dialog-footer">
    <el-button @click="reset" v-permission="['dis:rule:edit']">取 消</el-button>
    <el-button type="primary" @click="submit" v-permission="['dis:rule:edit']">确 定</el-button>
  </span>
</template>

<script setup>
  import { defineProps, reactive, ref, onMounted, getCurrentInstance, watch } from 'vue';
  import { ElMessage } from 'element-plus';
  const {
    $service: service,
    JSON_HEADER: JSON_HEADER,
  } = getCurrentInstance().appContext.config.globalProperties;
  // Data & Props
  // 点击编辑展示输入框
  const clickIndex = ref(-1);
  const tableIsEdit = ref(false);
  // 表格loading
  const tableLoading = ref(false);

  const state = reactive({
    // 数据源
    tableData: [],
    // 展示数据源
    showData: [],
    // 展示的比例数据源
    showPricentData: [],
    // 展示的文案数据源
    showPromptData: [],
  });

  watch(
    () => tableIsEdit.value,
    (count, prevCount) => {
      if (count) {
        state.showPricentData = state.tableData;
      } else {
        state.showPricentData = state.showData;
      }
    },
  );

  watch(
    () => clickIndex.value,
    (count, prevCount) => {
      if (count !== -1) {
        state.showPromptData = state.tableData;
      } else {
        state.showPromptData = state.showData;
      }
    },
  );

  // Methods
  // 得到数据
  const getList = () => {
    tableLoading.value = true;
    service.SaleRuleInfo().then((res) => {
      tableLoading.value = false;
      state.tableData = res;
      // 稍微改一下数据
      let temp = state.tableData.percent;
      state.tableData.percent = [
        {
          percent: temp,
          jibie: '普通推广员',
          indirectPercent: res.indirectPercent
        },
      ];

      // 展示的数据
      state.showData = JSON.parse(JSON.stringify(state.tableData));
      // 默认赋值
      state.showPromptData = state.showData;
      state.showPricentData = state.showData;
    });
  };
  // 比例编辑
  const percentEdit = () => {
    tableIsEdit.value = true;
  };
  // 文案编辑
  const promptEdit = (val) => {
    clickIndex.value = val;
  };
  // 取消
  const reset = () => {
    // 重置,赋值回去
    state.tableData = JSON.parse(JSON.stringify(state.showData));
    // 不为编辑状态
    clickIndex.value = -1;
    tableIsEdit.value = false;
  };
  // 提交
  const submit = () => {
    service
      .SaleRuleSave(
        {
          id: state.showData.id,
          percent: tableIsEdit.value
            ? state.showPricentData.percent[0].percent
            : state.showData.percent[0].percent,
          indirectPercent: tableIsEdit.value
            ? state.showPricentData.percent[0].indirectPercent
            : state.showData.percent[0].indirectPercent,
          prompts: state.showPromptData.prompts
        },
        JSON_HEADER,
      )
      .then((res) => {
        ElMessage({ showClose: true, message: '修改成功！', type: 'success' });
        // 不为编辑状态
        clickIndex.value = -1;
        tableIsEdit.value = false;
        getList();
      })
      .catch((err) => {
        console.log(err);
      });
  };
  // Life Circle
  // 生命周期
  onMounted(() => {
    // 得到数据
    getList();
  });
</script>

<style lang="less" scoped>
  .rule {
    .el-row {
      margin-bottom: 20px;
      .document-item {
        margin-bottom: 10px;
        .document {
          display: inline-block;
          background-color: #ddd;
          width: 80%;
          text-align: center;
          margin-right: 10px;
        }
        .document-button {
          color: #409eff;
          cursor: pointer;
        }
        .document-input {
          width: 80%;
          margin-right: 10px;
          outline: 0;
        }
      }
    }
  }
</style>
